import React, { useState, useEffect, useRef } from 'react';
import { Dropdown, Menu } from 'antd';
import * as echarts from 'echarts/lib/echarts';
import moment from 'moment';
import PropTypes from 'prop-types';

import { ExclamationOutlined, LineChartOutlined, CaretDownOutlined } from '#/utils/antdIcons';
import { TRDefault } from '@/components';
import china from './china.json';
import ModalDemo from '../ModalDemo';
import useCharts from '../ModuleCharts/useCharts';
import { mapOption, titleObj, rankingOption, allName } from './helper';
import styles from './index.less';

echarts.registerMap('china', china);

const Map = ({
  code,
  dateObj,
  data,
  mapData,
  color,
  deviationList,
  month,
  year,
  startDate,
  revenueAnalysis,
}) => {
  let leftData = data.filter((n) => n.provinceName === allName)[0] || {};
  let [rightSelect, setRightSelect] = useState(Object.keys(titleObj[code])[0]);
  let [distribution, setDistribution] = useState(titleObj[code][rightSelect].title);
  const [optionConfig, setOptionConfig] = useState({});
  const [rankOptionConfig, setRankOptionConfig] = useState({});

  const mapRef = useRef(null);
  const rankRef = useRef(null);
  useCharts(mapRef, optionConfig);
  useCharts(rankRef, rankOptionConfig);

  useEffect(() => {
    if (mapData && color[rightSelect]) {
      setDistribution(titleObj[code][rightSelect].title);
      setRankOptionConfig(rankingOption(mapData, rightSelect, color, revenueAnalysis));
      setOptionConfig(mapOption(mapData, rightSelect, color, code, revenueAnalysis));
    }
  }, [mapData, color, rightSelect]);

  const _onDistribution = (params) => {
    setDistribution(titleObj[code][params.key].title);
    setRankOptionConfig(rankingOption(mapData, params.key, color, revenueAnalysis));
    setOptionConfig(mapOption(mapData, params.key, color, code, revenueAnalysis));
  };

  const _onHandleRightSelect = (item) => {
    setRightSelect(item);
  };

  const menu = (
    <Menu onClick={_onDistribution}>
      <Menu.Item
        key={rightSelect}
        style={
          titleObj[code][rightSelect].title == distribution && {
            background: revenueAnalysis ? '#18a0fb' : '#edf8ff',
            fontWeight: 600,
          }
        }
      >
        {titleObj[code][rightSelect].title}
      </Menu.Item>
      {titleObj[code][rightSelect].children &&
        titleObj[code][rightSelect].children.map((item) => {
          return (
            <Menu.Item
              key={item}
              style={
                titleObj[code][item].title == distribution && {
                  background: revenueAnalysis ? '#18a0fb' : '#edf8ff',
                  fontWeight: 600,
                }
              }
            >
              {titleObj[code][item].title}
            </Menu.Item>
          );
        })}
    </Menu>
  );
  let showData = mapData.filter((n) => n.provinceName !== allName && n[rightSelect] !== null);
  let height = showData.length > 10 ? showData.length * 36 + 'px' : '100%';
  return (
    <div className={styles.mapBox} id="mapbox">
      <Left
        leftData={leftData}
        code={code}
        deviationList={deviationList}
        month={month}
        year={year}
        startDate={startDate}
        dateObj={dateObj}
        revenueAnalysis={revenueAnalysis}
      />
      <div className={`${styles.right} ${revenueAnalysis ? styles.revenueAnalysisRight : ''}`}>
        <div className={styles.header}>
          <ul>
            {Object.keys(titleObj[code]).map((item, index) => {
              if (!titleObj[code][item].header) {
                return null;
              }
              return (
                <li
                  onClick={() => {
                    _onHandleRightSelect(item);
                  }}
                  key={index}
                  className={rightSelect === item ? styles.select : ''}
                >
                  {titleObj[code][item].title}
                </li>
              );
            })}
          </ul>
        </div>
        {color[rightSelect] && color[rightSelect].length ? (
          <div className={styles.content}>
            <div style={{ width: '76%', height: '100%' }} ref={mapRef} />
            <div className={styles.rankBox}>
              <div className={styles.top}>
                {titleObj[code][rightSelect].children ? (
                  <Dropdown overlay={menu}>
                    <a
                      style={{ color: revenueAnalysis ? '#fff' : '#000' }}
                      onClick={(e) => e.preventDefault()}
                    >
                      {distribution}分布
                      <CaretDownOutlined
                        style={{ color: revenueAnalysis ? '#fff' : '#000', marginLeft: 5 }}
                      />
                    </a>
                  </Dropdown>
                ) : (
                  titleObj[code][rightSelect].title + '分布'
                )}
                <span>单位：{titleObj[code][rightSelect].unit}</span>
              </div>
              <div className={styles.scroll}>
                <div
                  style={{ width: '100%', height, minHeight: '100%', overflow: 'hidden' }}
                  ref={rankRef}
                />
              </div>
            </div>
          </div>
        ) : (
          <div className={styles.empty}>
            <TRDefault type="emptysm" />
          </div>
        )}
      </div>
    </div>
  );
};

const Left = ({
  code,
  leftData,
  deviationList,
  month,
  startDate,
  dateObj,
  year,
  revenueAnalysis,
}) => {
  const _year = year || moment(dateObj.startDate).format('YYYY');
  return (
    <div className={`${styles.left} ${revenueAnalysis ? styles.revenueAnalysisLeft : ''}`}>
      {code &&
        Object.keys(titleObj[code]).map((item, index) => {
          if (titleObj[code][item].unShow) {
            return null;
          }
          let title = `${titleObj[code][item].title}(${titleObj[code][item].unit || ''})`;
          return (
            <div key={index}>
              <div className={styles.title}>
                <span>{title}</span>
                {titleObj[code][item].deviation && deviationList ? (
                  <span
                    onClick={() => {
                      ModalDemo.show(deviationList, startDate, _year);
                    }}
                    className={styles.deviationIcon}
                  >
                    <LineChartOutlined className={styles.iconImg} />
                  </span>
                ) : (
                  ''
                )}
              </div>
              <div className={styles.value}>
                {leftData[item] || leftData[item] === 0 ? leftData[item] : '-'}
                {titleObj[code][item].otherIncome && (
                  <span className={styles.other}>
                    {titleObj[code][item].otherIncome.title}
                    <span
                      className={styles.otherspan}
                      style={{ color: revenueAnalysis ? '#fff' : '#373e48' }}
                    >
                      {leftData.otherIncome || leftData.otherIncome == 0
                        ? leftData.otherIncome
                        : '-'}
                      万元
                    </span>
                  </span>
                )}
              </div>
            </div>
          );
        })}
      <div className={styles.tag}>
        <span className={styles.icon}>
          <ExclamationOutlined style={{ color: '#ED5945' }} />
        </span>
        截止{_year}年{month}月累计
      </div>
    </div>
  );
};

Map.propTypes = {
  code: PropTypes.string,
  dateObj: PropTypes.object,
  data: PropTypes.array,
  mapData: PropTypes.array,
  color: PropTypes.any,
  deviationList: PropTypes.array,
  month: PropTypes.number,
  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  startDate: PropTypes.node,
};

Left.propTypes = {
  code: PropTypes.string,
  leftData: PropTypes.object,
  dateObj: PropTypes.object,
  color: PropTypes.any,
  deviationList: PropTypes.array,
  month: PropTypes.number,
  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  startDate: PropTypes.node,
};

export default Map;
